<template>
	<div style="margin-top: 30px">
		<div>
			<span>基本信息</span>
			<el-button type="text" size="small" style="margin-left: 15px" icon="edit-pen" @click="editInfo"></el-button>
		</div>
		<div style="margin-top: 10px">
			<el-form
				ref="ruleFormRef"
				:model="dataForm"
				:rules="rules"
				label-width="120px"
			>
				<el-form-item label="用户昵称：" prop="name">
					{{ dataForm.name }}
				</el-form-item>
				<el-form-item label="用户ID：" prop="id">
					{{ dataForm.uid }}
				</el-form-item>
				<el-form-item label="性别：" prop="sex">
					{{ dataForm.sex }}
				</el-form-item>
				<el-form-item label="出生日期：" prop="borndata">
					{{ dataForm.borndata }}
				</el-form-item>
				<el-form-item label="标签：" prop="tab">
					<el-tag style="margin-left: 10px" type="warning"
									v-for="(data,indexJ) in dataForm.tab"
									:key="indexJ"
									:label="data"
									:value="data">
						{{ data }}
					</el-tag>
				</el-form-item>
				<el-form-item label="个人简介：" prop="brief">
					<el-input disabled
										v-model="dataForm.brief"
										:autosize="{ minRows: 2, maxRows: 300 }"
										type="textarea"
										placeholder="Please input"
					/>
				</el-form-item>

			</el-form>
		</div>

		<div>
			<el-dialog
				v-model="dialogVisible"
				title="基本信息编制"
				width="30%"
				:before-close="handleClose"
			>
				<el-form
					ref="ruleFormRef"
					:model="editForm"
					:rules="rules"
					label-width="120px"
				>
					<el-form-item label="用户昵称：" prop="name">
						<el-input v-model="editForm.name" placeholder="请输入昵称。。。。" style="width: 75%"/>
					</el-form-item>
					<el-form-item label="用户ID：" prop="id">
						{{ editForm.uid }}
					</el-form-item>
					<el-form-item label="性别：" prop="sex">
						<el-radio v-model="editForm.sex" label="1" size="large">男</el-radio>
						<el-radio v-model="editForm.sex" label="2" size="large">女</el-radio>
					</el-form-item>
					<el-form-item label="出生日期：" prop="borndata">
						<el-date-picker
							v-model="editForm.borndata"
							type="date"
							placeholder="Pick a day"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="标签：" prop="tab">
						<el-tag style="margin-left: 10px" type="warning"
										v-for="(data,indexJ) in editForm.tab"
										:key="indexJ"
										:label="data"
										:value="data">
							{{ data }}
						</el-tag>

						<el-button type="text" style="margin-left: 15px" icon="circle-plus"
											 @click="dialogTag = true"></el-button>
					</el-form-item>
					<el-form-item label="个人简介：" prop="brief">
						<el-input
							v-model="editForm.brief"
							:autosize="{ minRows: 2, maxRows: 300 }"
							type="textarea"
							placeholder="Please input"
						/>
					</el-form-item>

				</el-form>
				<template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="onCloseEdit">确定</el-button>
                     </span>
				</template>
			</el-dialog>
		</div>


		<div>
			<el-dialog v-model="dialogTag" title="添加标签" width="30%">
				<el-input placeholder="请输入文字" v-model="tagInput"/>
				<template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogTag = false">取消</el-button>
                        <el-button type="primary" @click="addTag">确定</el-button>
                    </span>
				</template>
			</el-dialog>
		</div>


	</div>
</template>

<script setup lang="ts">

let dataForm = {};
let editForm = {};
const dialogVisible = ref(false);
// const isHoliday = ref(false);
const dialogTag = ref(false);
// const agInput = ref("");

</script>

<style scoped lang="scss">

</style>